<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>





<div class="large-12 column">
	<form>
		<div class="large-12 column">
			<input type="text" placeholder="Title">
		</div>
		<div class="large-12 column">
<button id="cropLink" class="btn btn-primary">Crop Image to x: 45, y: 5, width: 390, height: 125</button>

<div class="layout image-cropper">
  <div class="column w50">
    <div class="column-content">
      <img id="image" src="http://alloyui.com/image-cropper/img/crop-image.jpg" />
    </div>
  </div>
  <div id="cropped-view" class="column w50">
    <div class="column-content cropped-output">
      <div class="cropped-image helper-hidden" id="croppedImage"></div>
      <div class="status helper-hidden" id="status"></div>
    </div>
  </div>
</div>
		</div>
		<div class="large-12 column">
			<div id="myEditor" style="height:10rem !important;width:8rem;overflow:auto;"></div>
		</div>
		<div class="large-12 column">
			<div id="myDataTable"></div>
		</div>
	</form>
</div>

<script type="text/javascript">
YUI().use(
  'aui-image-cropper',
  function(Y) {
    var imageCropper = new Y.ImageCropper(
      {
        srcNode: '#image',
        cropHeight: 193,
        cropWidth: 200,
        resizable: true,
        x: 0,
        y: 0
      }
    ).render();

    var statusTPL = '<strong class="x">x: {x}</strong><strong class="y">y: {y}</strong><strong class="height">height: {height}</strong><strong class="width">width: {width}</strong>';

    var updateImage = function() {
      var cropRegion = imageCropper.get('region');

      croppedImage.setStyles(
        {
          'backgroundPosition': (-cropRegion.x) + 'px ' + (-cropRegion.y) + 'px',
          height: cropRegion.height,
          width: cropRegion.width
        }
      );

      croppedImage.html(Y.Lang.sub(statusTPL, cropRegion));
    };

    imageCropper.after(
      'crop',
      function(event) {
        updateImage();
      }
    );

    var croppedImage = Y.one('#croppedImage');

    var croppedStatus = Y.one('#croppedStatus');

    croppedImage.show();

    updateImage();

    Y.one('#cropLink').on(
      'click',
      function (event) {
        imageCropper.setAttrs(
          {
            cropHeight: 125,
            cropWidth: 390,
            x: 45,
            y: 5
          }
        );
      }
    );
  }
);
</script>

<script>
YUI().use(
  'aui-ace-editor',
  function(Y) {
    new Y.AceEditor(
      {
        boundingBox: '#myEditor',
        mode: 'javascript',
        value: '<body id="content"></body>'
      }
    ).render();
  }
);
</script>
<script>
YUI().use(
  'aui-viewport'
);
</script>
<style>
.view-lt320 .myViewport,
.view-320 .myViewport {
    body{
    	background: yellow !important;
    }
}
.view-480 .myViewport {
    body{
    	background: blue !important;
    }
}
.view-720 .myViewport {
    body{
    	background: orange !important;
    }
}
.view-960 .myViewport {
    body{
    	background: lime !important;
    }
}
</style>

<script type="text/javascript">
  $(document).ready(function(){
    $('.company-rating').jRating({
    });

    $('.user-rating').jRating({
      type:'small',
      length : 5,
      decimalLength : 1,
    });
  });
</script>
